<template>
    <div id="app">
        <el-carousel :interval="3000" arrow="always" height="285px">
            <el-carousel-item v-for="(img,index) in imgList" :key="index">
                <img style="width: 100%;height: inherit;" v-bind:src="img.url">
            </el-carousel-item>
        </el-carousel>
        <span class="demonstration">社区疫情防控管理系统</span>
        <el-divider></el-divider>

        <div>
            <div style="width: 90%">
                <el-row :gutter="150">
                    <el-col :span="9">
                        <div style="padding-left:0%;">
                            <el-card class="box-card" :body-style="{ paddingLeft: '20px' }" shadow="hover"
                                     style="background-color: #1c24c7">
                                <div style="width: 480px;height: 500px;overflow:auto">
                                    管理员信息公示
                                    管理员姓名：
                                    管理员联系方式：
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div style="padding-left: 55%">
                            <el-card class="box-card" :body-style="{ paddingLeft: '30px' }" shadow="hover"
                                     style="background-color: #e01c1c">
                                <div style="width: 80%">
                                    <el-calendar v-model="value">
                                    </el-calendar>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!--<el-row :gutter="100">
            <el-col :span="8" >
                <el-card class="box-card" :body-style="{ paddingLeft: '30px' }" shadow="hover">
                    <div>
                        <el-table
                                ref="singleTable"
                                :data="tableData"
                                highlight-current-row
                                @current-change="handleCurrentChange"
                                style="width: 100%">
                            <el-table-column
                                    property="address"
                                    label="公告"
                                    width="500">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card" :body-style="{ paddingLeft: '10px' }" shadow="hover">
                    <div style="width: 90%">
                        <el-calendar v-model="value">
                        </el-calendar>
                    </div>
                </el-card>
            </el-col>
        </el-row>-->
        <el-divider></el-divider>
        <el-divider></el-divider>
        <div>
            <span>关于我们</span>
            <el-divider direction="vertical"></el-divider>
            <span>免责声明</span>
            <el-divider direction="vertical"></el-divider>
            <span>隐私保护</span>
            <el-divider direction="vertical"></el-divider>
            <a href="https://www.12371.cn/special/xgyq/zgdt/" target="_blank">友情链接</a>
        </div>
        <el-divider></el-divider>
    </div>
</template>
<script>
    export default {
        name: "index",
        data() {
            return {
                value: new Date(),
                tableData: [{
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                imgList: [
                    {url: require('../../assets/lunbotu/lunbo1.jpg')},
                    {url: require('../../assets/lunbotu/lunbo2.jpg')},
                    {url: require('../../assets/lunbotu/lunbo3.jpg')},
                ]
            }
        },
        methods: {}
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #0c64d2;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .demonstration {
        font-size: 25px;
        display: flex;
        font-weight: bold;
        color: #ff5502;
        padding-top: 20px;
        width: 250px;
        margin: 0 auto;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #1a64d0;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #0768dc;
    }

    .el-row {
        padding-left: 5%;
        padding-right: 5%;
    }

    /*.el-card {
        height: 400px;
        width: 600px;
    }*/
    .el-card {
        font-weight: bold;
        height: 500px;
        width: 520px;
        margin: 0 auto;
    }

    /deep/  .el-calendar-table .el-calendar-day{
        /*更改日历大小*/
         height: 30px;
     }

    .el-link {
        display: flex;
        align-items: center;
        padding-top: 20%;
    }

</style>